<template>
  <pro-layout
    v-model:collapsed="state.collapsed"
    v-model:selectedKeys="state.selectedKeys"
    v-model:openKeys="state.openKeys"
    :loading="loading"
    :menu-data="menuData"
    :breadcrumb="{ routes: breadcrumb }"
    disable-content-margin
    style="min-height: 100vh"
    iconfont-url="//at.alicdn.com/t/c/font_3566381_63559np5vc5.js"
    v-bind="proConfig"
  >
    <template #menuHeaderRender>
      <router-link :to="{ path: '/' }">
        <img src="/src/assets/logo.svg" />
        <h1>i5xforMe</h1>
      </router-link>
    </template>
    <template #rightContentRender>
      <div style="flex: 1 1 100%">
        <menu-unfold-outlined
          v-if="state.collapsed"
          class="trigger"
          @click="() => (state.collapsed = !state.collapsed)"
        />
        <menu-fold-outlined v-else class="trigger" @click="() => (state.collapsed = !state.collapsed)" />
      </div>
      <div style="flex: 1 1 100%">
        <a-typography-text type="secondary">人心惟危，道心惟微；惟精惟一，允执厥中 ——《尚书·大禹谟》</a-typography-text>
      </div>
      <RightContent :current-user="currentUser" />
    </template>
    <!-- custom breadcrumb itemRender  -->
    <template #breadcrumbRender="{ route, params, routes }">
      <span v-if="routes.indexOf(route) === routes.length - 1">
        <HeartOutlined />
        {{ route.breadcrumbName }}
      </span>
      <router-link v-else :to="{ path: route.path, params }">
        <SmileOutlined />
        {{ route.breadcrumbName }}
      </router-link>
    </template>
    <!--    <SettingDrawer v-model="proConfig" />-->
    <RouterView v-slot="{ Component, route }">
      <transition name="slide-left" mode="out-in">
        <component :is="Component" :key="route.path" />
      </transition>
    </RouterView>
  </pro-layout>
</template>

<script setup lang="ts">
import { RouterLink, RouterView, useRouter } from 'vue-router';
import { clearMenuItem, getMenuData, ProLayout, type RouteContextProps } from '@ant-design-vue/pro-layout';
import { HeartOutlined, MenuFoldOutlined, MenuUnfoldOutlined, SmileOutlined } from '@ant-design/icons-vue';
import { useStoreGlobalStore } from '@/store';
import type { LoginUser } from '@/store/login/loginUser';

const router = useRouter();
const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));

const state = reactive<Omit<RouteContextProps, 'menuData'>>({
  collapsed: false, // default collapsed
  openKeys: [], // default openKeys
  selectedKeys: [], // default selectedKeys
});
const loading = ref(false);
const proConfig = ref({
  layout: 'side',
  navTheme: 'dark',
  fixedHeader: true,
  fixSiderbar: true,
  splitMenus: true,
});
const breadcrumb = computed(() =>
  router.currentRoute.value.matched
    .map(item => {
      return {
        path: item.path,
        breadcrumbName: item.meta.title || '',
      };
    })
    .concat(),
);
const globalStore = useStoreGlobalStore();
const currentUser: LoginUser = reactive({
  userName: globalStore.state.loginUser.userName,
  token: globalStore.state.loginUser.token,
  role: globalStore.state.loginUser.role,
});

watch(
  router.currentRoute,
  () => {
    const matched = router.currentRoute.value.matched.concat();
    state.selectedKeys = matched.filter(r => r.name !== 'home').map(r => r.path);
    state.openKeys = matched.filter(r => r.path !== router.currentRoute.value.path).map(r => r.path);
  },
  {
    immediate: true,
  },
);
</script>
